<template>
    <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="类别">
          <el-input v-model="data.categoryId" placeholder="类别" clearable />
        </el-form-item>
        <el-form-item label="关键词" style="width: 300px;">
          <el-input v-model="data.keywords" placeholder="请输入条码,名称,规格,型号" clearable />
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="data.color" placeholder="颜色" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getGoods()">查询</el-button>
          <el-button  >重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" >导入</el-button>
      <el-button type="primary" >导出</el-button>
      <el-button  >批量操作</el-button>
      <el-button  >列设置</el-button>
     
    <el-table :data="goodList" style="width: 100%" @selection-change="getall">
            <el-table-column type="selection" />
            <el-table-column prop="traceabilityIamnges" label="操作" width="180">
                <template v-slot="scoped">
                    <el-link type="primary" @click="upd(scoped.row.traceabilityId)">编辑</el-link>
                    <el-link type="danger" @click="shan(scoped.row.traceabilityId)">删除</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="barcode" label="条码" width="180" />
            <el-table-column prop="productName" label="名称" width="180" />
            <el-table-column prop="standard" label="规格" width="180" />
            <el-table-column prop="productModel" label="型号" width="180" />
            <el-table-column prop="productColor" label="颜色" width="180" />
            <el-table-column prop="categoryId" label="类别" width="180" />
            <el-table-column prop="unit" label="单位" width="180" />
            <el-table-column prop="repertory" label="库存" width="180" />
            <el-table-column prop="purchasePrice" label="采购价" width="180" />
            <el-table-column prop="retailPrice" label="零售价" width="180" />
            <el-table-column prop="salePrice" label="销售价" width="180" />
            <el-table-column prop="lastMinPrice" label="最低售价" width="180" />
            <el-table-column prop="enabled" label="状态" width="180" >
                <template v-slot="scoped">
                    <el-text v-if="scoped.row.enabled == 1 " type="success" >启用</el-text>
                    <el-text v-else="" type="danger" >禁用</el-text>
                </template>
            </el-table-column>
    <!-- 
            <el-table-column prop="allNeedGet" label="信息完善度" width="180" />
            <el-table-column prop="allNeedPay" label="信息完善度" width="180" />
            <el-table-column prop="fax" label="信息完善度" width="180" />
            <el-table-column prop="telephone" label="信息完善度" width="180" />
            <el-table-column prop="address" label="信息完善度" width="180" />
            <el-table-column prop="taxNum" label="信息完善度" width="180" />
            <el-table-column prop="bankName" label="信息完善度" width="180" />
            <el-table-column prop="accountNumber" label="信息完善度" width="180" />
            <el-table-column prop="taxRate" label="信息完善度" width="180" />
            <el-table-column prop="sort" label="信息完善度" width="180" />
            <el-table-column prop="tenantId" label="信息完善度" width="180" />
            <el-table-column prop="deleteFlag" label="信息完善度" width="180" /> -->
           
        </el-table>
        
      <div>
    <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.listCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>

    </template>
    
    <script setup lang="js">
    import { ref, reactive, onMounted } from 'vue'
    import { ElMessage,ElMessageBox } from 'element-plus'
    import { useRouter,useRoute } from 'vue-router'
    import axios from 'axios'
    
    
    const router=useRouter()
    const route=useRoute()
    const data=reactive({
        categoryId:"",
        keywords:"",
        color:"",
    })
    const page=reactive({
        pageSize:10,
        pageIndex:1,
        listCount:"",
        pageCount:""
    })
    onMounted(()=>{
        getGoods()
    })
    const all=ref([])
    const getall=(val)=>{
        all.value=val;
        getSupplierCustomerInfos();
    }
const handleSizeChange = (val) => {
  page.pageSize=val;
  getGoods()
}
const handleCurrentChange = (val) => {
    page.pageIndex=val;
    getGoods()
}
    
    const goodList=ref([])
    const getGoods=()=>{
        axios.get("ERP/GetGoods",{params:{
            categoryId:data.categoryId||0,
            keywords:data.keywords,
            color:data.color,
            pageSize:page.pageSize,
            pageIndex:page.pageIndex
        }}).then(res=>{
            goodList.value=res.data.list
            page.listCount=res.data.listCount
            page.pageCount=res.data.pageCount
        })
    }
    
    
    
    
    
    
    
    
    </script>
    
    <style scoped>
    
    </style>